<template>
    <div class="muen">
        <div class="muen_box">
            <ul>
                <!-- 菜单列表 -->
                <li v-for="(item,index) in MuenList" :key="item.MuenName" @mousemove="MuenMove(index)"><a href="#">{{item.MuenName}}</a><i class="el-icon-arrow-right"></i></li>
                <!-- 商品列表 -->
                <div class="Muen_show" v-show="isAuth" @mouseleave="isAuth=false">
                    <ul>
                        <!-- index为字符串所以需要转换为数字 -->
                        <li v-for="item in MuenList[Number(index)].Shoplist" :key="item.url">
                            <a href="#">
                                <img :src="item.url" alt="">
                                <span class="text">{{item.text}}</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:'Muen',
    data(){
        return{
            MuenList:[
                {
                    MuenName:'生活',
                    Shoplist:[
                        {
                            url:require('../assets/MuenImg/sj01.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi01.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi02.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi02.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi02.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi03.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi04.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi05.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi05.png'),
                            text:'Xiaomi MIX Fold 2',
                        },
                         {
                            url:require('../assets/MuenImg/Xiaomi01.png'),
                            text:'Xiaomi MIX Fold 2',
                        }
                    ]
                },
                {
                    MuenName:'电视',
                    Shoplist:[
                        {
                            url:require('../assets/MuenImg/DS01.png'),
                            text:'Redmi智能电视X55 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS02.png'),
                            text:'Redmi智能电视X65 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS03.png'),
                            text:'小米电视6 65”  OLED',
                        },
                         {
                            url:require('../assets/MuenImg/DS04.png'),
                            text:'小米电视 大师  77”  OLED',
                        },
                         {
                            url:require('../assets/MuenImg/DS05.png'),
                            text:'小米透明电视',
                        },
                         {
                            url:require('../assets/MuenImg/DS06.png'),
                            text:'Redmi智能电视X55 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS01.png'),
                            text:'Redmi智能电视X55 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS02.png'),
                            text:'Redmi智能电视X55 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS01.png'),
                            text:'Redmi智能电视X55 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS03.png'),
                            text:'小米电视6 65”  OLED',
                        },
                         {
                            url:require('../assets/MuenImg/DS01.png'),
                            text:'Redmi智能电视X55 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS02.png'),
                            text:'Redmi智能电视X65 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS04.png'),
                            text:'小米电视 大师  77”  OLED',
                        },
                         {
                            url:require('../assets/MuenImg/DS06.png'),
                            text:'Redmi智能电视X55 2022',
                        },
                         {
                            url:require('../assets/MuenImg/DS05.png'),
                            text:'小米透明电视',
                        },
                         {
                            url:require('../assets/MuenImg/DS04.png'),
                            text:'小米电视 大师  77”  OLED',
                        },
                         {
                            url:require('../assets/MuenImg/DS03.png'),
                            text:'小米电视6 65”  OLED',
                        },
                         {
                            url:require('../assets/MuenImg/DS01.png'),
                            text:'Redmi智能电视X55 2022',
                        },
                    ]
                },
                {
                    MuenName:'笔记本 平板',
                     Shoplist:[
                        {
                            url:require('../assets/MuenImg/Notebook01.png'),
                            text:'Xiaomi Book Pro 14 锐龙版',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook02.png'),
                            text:'Redmi G 游戏本 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook03.png'),
                            text:'Xiaomi Book Pro 14 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook04.png'),
                            text:'Xiaomi MIX -Fold2',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook05.png'),
                            text:'Xiaomi Book Pro 16 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook06.png'),
                            text:'Redmi Pro14 2022 锐龙版',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook01.png'),
                            text:'Xiaomi Book Pro 14 锐龙版',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook02.png'),
                            text:'Redmi G 游戏本 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook03.png'),
                            text:'Xiaomi Book Pro 14 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook04.png'),
                            text:'Xiaomi MIX -Fold2',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook05.png'),
                            text:'Xiaomi Book Pro 16 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook06.png'),
                            text:'Redmi Pro14 2022 锐龙版',
                        },{
                            url:require('../assets/MuenImg/Notebook01.png'),
                            text:'Xiaomi Book Pro 14 锐龙版',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook02.png'),
                            text:'Redmi G 游戏本 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook03.png'),
                            text:'Xiaomi Book Pro 14 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook04.png'),
                            text:'Xiaomi MIX -Fold2',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook05.png'),
                            text:'Xiaomi Book Pro 16 2022',
                        },
                        {
                            url:require('../assets/MuenImg/Notebook06.png'),
                            text:'Redmi Pro14 2022 锐龙版',
                        },
                        ]
                },
                {
                    MuenName:'出行 穿戴',
                    Shoplist:[
                        {
                            url:require('../assets/MuenImg/Walk01.png'),
                            text:'Xiaomi Watch S1 Pro',
                        },
                         {
                            url:require('../assets/MuenImg/Walk02.png'),
                            text:'小米手环7 Pro',
                        },
                         {
                            url:require('../assets/MuenImg/Walk03.png'),
                            text:'平衡车',
                        },
                         {
                            url:require('../assets/MuenImg/Walk04.png'),
                            text:'自行车',
                        },
                         {
                            url:require('../assets/MuenImg/Walk05.png'),
                            text:'Xiaomi Watch Color 2',
                        },
                         {
                            url:require('../assets/MuenImg/Walk06.png'),
                            text:'石英手表',
                        },
                        ]
                },
                {
                    MuenName:'耳机 音箱',
                    Shoplist:[
                        {
                            url:require('../assets/MuenImg/Headset01.png'),
                            text:'Xiaomi Sound',
                        },
                         {
                            url:require('../assets/MuenImg/Headset02.png'),
                            text:'Redmi Buds 4 Pro',
                        },
                         {
                            url:require('../assets/MuenImg/Headset03.png'),
                            text:'小米小爱触屏音箱',
                        },
                         {
                            url:require('../assets/MuenImg/Headset04.png'),
                            text:'Redmi小爱触屏音箱 8',
                        }, {
                            url:require('../assets/MuenImg/Headset01.png'),
                            text:'Xiaomi Sound',
                        },
                         {
                            url:require('../assets/MuenImg/Headset02.png'),
                            text:'Redmi Buds 4 Pro',
                        },
                         {
                            url:require('../assets/MuenImg/Headset03.png'),
                            text:'小米小爱触屏音箱',
                        },
                         {
                            url:require('../assets/MuenImg/Headset04.png'),
                            text:'Redmi小爱触屏音箱 8',
                        },
                         {
                            url:require('../assets/MuenImg/Headset01.png'),
                            text:'Xiaomi Sound',
                        },
                         {
                            url:require('../assets/MuenImg/Headset02.png'),
                            text:'Redmi Buds 4 Pro',
                        },
                         {
                            url:require('../assets/MuenImg/Headset03.png'),
                            text:'小米小爱触屏音箱',
                        },
                         {
                            url:require('../assets/MuenImg/Headset04.png'),
                            text:'Redmi小爱触屏音箱 8',
                        },
                    ]
                },
                {
                    MuenName:'家电',
                    Shoplist:[
                        {
                            url:require('../assets/MuenImg/Home01.png'),
                            text:'Xiaomi 冰箱',
                        },
                         {
                            url:require('../assets/MuenImg/Home01.png'),
                            text:'Xiaomi 冰箱',
                        },
                         {
                            url:require('../assets/MuenImg/Home01.png'),
                            text:'Xiaomi 冰箱',
                        },
                         {
                            url:require('../assets/MuenImg/Home01.png'),
                            text:'Xiaomi 冰箱',
                        },
                         {
                            url:require('../assets/MuenImg/Home01.png'),
                            text:'Xiaomi 冰箱',
                        },
                         {
                            url:require('../assets/MuenImg/Home01.png'),
                            text:'Xiaomi 冰箱',
                        },
                        ]
                },
                {
                    MuenName:'智能 路由器',
                     Shoplist:[
                        {
                            url:require('../assets/MuenImg/Router01.png'),
                            text:'Xiaomi 摄像机',
                        },
                          {
                            url:require('../assets/MuenImg/Router01.png'),
                            text:'Xiaomi 摄像机',
                        },
                          {
                            url:require('../assets/MuenImg/Router01.png'),
                            text:'Xiaomi 摄像机',
                        },
                          {
                            url:require('../assets/MuenImg/Router01.png'),
                            text:'Xiaomi 摄像机',
                        },
                          {
                            url:require('../assets/MuenImg/Router01.png'),
                            text:'Xiaomi 摄像机',
                        },
                          {
                            url:require('../assets/MuenImg/Router01.png'),
                            text:'Xiaomi 摄像机',
                        },
                          {
                            url:require('../assets/MuenImg/Router01.png'),
                            text:'Xiaomi 摄像机',
                        },
                ]
                },
                {
                    MuenName:'电源 配件',
                     Shoplist:[
                        {
                            url:require('../assets/MuenImg/Powersupply01.png'),
                            text:'Xiaomi 手机壳',
                        },
                         {
                            url:require('../assets/MuenImg/Powersupply01.png'),
                            text:'Xiaomi 手机壳',
                        },
                         {
                            url:require('../assets/MuenImg/Powersupply01.png'),
                            text:'Xiaomi 手机壳',
                        },
                         {
                            url:require('../assets/MuenImg/Powersupply01.png'),
                            text:'Xiaomi 手机壳',
                        },
                         {
                            url:require('../assets/MuenImg/Powersupply01.png'),
                            text:'Xiaomi 手机壳',
                        },
                         {
                            url:require('../assets/MuenImg/Powersupply01.png'),
                            text:'Xiaomi 手机壳',
                        },
                ]
                },
                {
                    MuenName:'健康 儿童',
                     Shoplist:[
                        {
                            url:require('../assets/MuenImg/Children01.png'),
                            text:'Xiaomi 遥控赛车',
                        },
                         {
                            url:require('../assets/MuenImg/Children01.png'),
                            text:'Xiaomi 遥控赛车',
                        },
                         {
                            url:require('../assets/MuenImg/Children01.png'),
                            text:'Xiaomi 遥控赛车',
                        },
                         {
                            url:require('../assets/MuenImg/Children01.png'),
                            text:'Xiaomi 遥控赛车',
                        },
                         {
                            url:require('../assets/MuenImg/Children01.png'),
                            text:'Xiaomi 遥控赛车',
                        },
                         {
                            url:require('../assets/MuenImg/Children01.png'),
                            text:'Xiaomi 遥控赛车',
                        },
                ]
                },
                {
                    MuenName:'生活 箱包',
                     Shoplist:[
                        {
                            url:require('../assets/MuenImg/Bag01.png'),
                            text:'Xiaomi 包',
                        },
                        {
                            url:require('../assets/MuenImg/Bag01.png'),
                            text:'Xiaomi 包',
                        },
                        {
                            url:require('../assets/MuenImg/Bag01.png'),
                            text:'Xiaomi 包',
                        },
                        {
                            url:require('../assets/MuenImg/Bag01.png'),
                            text:'Xiaomi 包',
                        },
                        {
                            url:require('../assets/MuenImg/Bag01.png'),
                            text:'Xiaomi 包',
                        },
                        {
                            url:require('../assets/MuenImg/Bag01.png'),
                            text:'Xiaomi 包',
                        },
                ]
                },
            ],
            isAuth:false,
            index:'',
        }
    },
    methods:{
        MuenMove(index){
            this.isAuth=true;
            this.index=index;
        }
    }
}
</script>

<style scoped>
    .muen{

        width: 200px;
        height: 100%;
    }
    .muen_box{
        width: 240px;
        height: 460px;
        border: 0px;
        background-color:rgba(105,101,101,.6);
    }
    .muen_box ul{
        padding-top:20px;
    }
    .muen_box ul li{
        position: relative;
        width: 100%;
        height:42px;
    }
    .muen_box ul li a{
        display: block;
        font-size: 15px;
        padding-left: 30px;
        line-height: 42px;
        color: white;
    }
      .muen_box ul li a:hover{
        background-color:#ff6700;
      }
    .el-icon-arrow-right{
        position:absolute;
        top: 0px;
        right: 20px;
        margin-right: 20px;
        line-height: 42px;
        color: white;
    }
    /* 隐藏菜单 */
    .Muen_show{
        position: absolute;
        top: 0px;
        left: 240px;
        height: 100%;
        width:987px;
        box-shadow: -1px 5px 10px #ccc;
        background-color: #fff;
    }
    .Muen_show ul{
        margin-top: -20px;
    }
    .Muen_show ul li {
        float: left;
        width: 265px;
        height: 40px;
        padding: 18px 20px;
    }
    .Muen_show ul li a:hover{
        background-color: white;
    }
    .Muen_show ul li a{
        display: block;
        /* padding: 18px 20px; */
        font-size: 12px;
        height: 100%;
        color: #333;
    }
    .Muen_show ul li .text:hover{
        color:#ff6700;
    }
     .Muen_show ul li a img{
        float: left;
        width: 40px;
        height: 40px;
        margin-right: 20px;
        object-fit: cover;
     }
     /* .Muen_show ul li a span{
        display: inline-block;
        width: 100px;
     } */
</style>